
<!-- Copyright IBM Corp, All Rights Reserved.

 SPDX-License-Identifier: Apache-2.0
-->

{% from "macros.html" import nav_link with context %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Block Chain Cloud Service">
    <meta name="author" content="Baohua Yang">
    <link rel="icon" href="../static/img/favicon.ico">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    {% block head %}
        <title>Cello Operation Dashboard</title>
    {% endblock %}

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/vue-beauty.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/paginate.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/dataTables.bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/jquery.dataTables.min.css') }}">
    {% block custom_css %}
    {% endblock %}
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <script src="//cdn.bootcss.com/moment.js/2.18.1/moment.min.js"></script>
    <script src="{{ url_for('static', filename='js/vue-beauty.min.js') }}"> </script>
    <script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>

<!--
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link href="../static/css/fix_glyphicons.css" rel="stylesheet">
-->

<!-- Latest compiled and minified CSS -->

</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Cello Dashboard</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Settings</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Help</a></li>
            <li>
                {{ nav_link("bp_auth_api.logout", "Logout") }}
            </li>
          </ul>
          <form class="navbar-form navbar-right">
            <input type="text" class="form-control" placeholder="Search...">
          </form>
        </div>
      </div>
    </nav>

<div class="container-fluid">
    <div class="row" style="position:relative">
        <div class="col-sm-2 col-md-2 sidebar">
            <ul class="nav nav-sidebar nav-list">
                {{ nav_link("bp_index.show", "Overview") }}
                {{ nav_link("bp_stat_view.show", "System Status") }}
                {{ nav_link("bp_host_view.hosts_show", "Hosts") }}
                {{ nav_link("bp_cluster_view.clusters_show", "Active Chains", type="active") }}
                {{ nav_link("bp_cluster_view.clusters_show", "Inused Chains", type="inused" ) }}
                {{ nav_link("bp_cluster_view.clusters_show", "Release History", type="released") }}
                {{ nav_link("bp_user_view.users", "User Management") }}
                {{ nav_link("bp_index.about", "About") }}
            </ul>
        </div>
        <div class="col-sm-8 col-sm-offset-3 col-md-8 col-md-offset-3">
            <div class="alert alert-success col-sm-6" id="success-alert" hidden>
                <button type="button" class="close" data-dismiss="alert">x</button>
                <strong>Success! </strong>
            </div>
            {% block body %}
            {% endblock %}
        </div>
    </div>
</div>

<!-- Modal -->
<div id="newHostModal" class="modal fade" role="dialog">
  <div class="modal-dialog" width="40%">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Add a host</h4>
      </div>
      <div class="modal-body">
          <form role="form" id="add_new_host_form"
                data-toggle="validator">
              <div class="form-group form-inline has-feedback">
                  <label for="host_name" style="width: 20%">*Name</label>
                  <input id="host_name" name="name" type="text" width="40%"
                         pattern="^[-_A-z0-9]{1,}$"
                         minlength="1" maxlength="16" class="form-control"  placeholder="Host_Name(1~16 char)" data-error="Host name is required" required autofocus>
              </div>

              <div class="form-group form-inline has-feedback">
                  <label for="host_worker_api" style="width: 20%">*Daemon URL</label>
                  <input id="host_worker_api" type="text" name="worker_api" pattern="^(\d+)\.(\d+)\.(\d+)\.(\d+):(\d+)$"
                         class="form-control" placeholder="192.168.0.1:2375"
                         data-error="That address is invalid" required>
              </div>
              <div class="form-group form-inline has-feedback">
                  <label for="host_capacity" style="width: 20%">Capacity</label>
                  <input id="host_capacity" type="number" name="capacity"
                         class="form-control" min="0" max="1000" value=1 required>
              </div>
              {% if host_types|length > 0 %}
                    <div class="form-group form-inline">
                        <label for="host_type" style="width: 20%">Host Type</label>
                        <select id="host_type" class="c-select host_type"
                                name="host_type" required>
                            <option selected
                                    value="{{host_types[0]}}">{{host_types[0]|upper }}</option>
                            {% for c in host_types[1:] %}
                                    <option value="{{c}}">{{c|upper}}</option>
                            {% endfor %}
                        </select>
                    </div>
              {% endif %}
              {% if log_levels|length > 0 %}
                    <div class="form-group form-inline">
                        <label for="log_level" style="width: 20%">Logging Level</label>
                        <select id="log_level" class="c-select log_level"
                                name="log_level" required>
                            <option selected
                                    value="{{log_levels[0]}}">{{log_levels[0]|upper }}</option>
                            {% for c in log_levels[1:] %}
                                    <option value="{{c}}">{{c|upper}}</option>
                            {% endfor %}
                        </select>
                    </div>
              {% endif %}
              {% if log_types|length > 0 %}
                    <div class="form-group form-inline">
                        <label for="log_type" style="width: 20%">Logging Type</label>
                        <select id="log_type" class="c-select log_type"
                                name="log_type" required>
                            <option selected
                                    value="{{log_types[0]}}">{{log_types[0]|upper }}</option>
                            {% for c in log_types[1:] %}
                                    <option value="{{c}}">{{c|upper}}</option>
                            {% endfor %}
                        </select>

                        <input type="text" id="log_server" name="log_server"
                               style="display: none"
                               class="form-control log_server"
                               placeholder="syslog server"
                        >
                    </div>
              {% endif %}

              <div class="form-group checkbox">
                  <label>
                      <input type="checkbox" name="schedulable"> Schedulable for cluster request
                  </label>
                  <label>
                      <input type="checkbox" name="autofill"> Keep filled with cluster
                  </label>
              </div>
          </form>
      </div>
        <div class="modal-footer">
            <button class="btn btn-primary btn-success btn-sm btn-default create_host_button" type="submit">Create</button>
            <button class="btn btn-default btn-sm" data-dismiss="modal" type="button">Cancel</button>
        </div>
    </div>
  </div>
</div>

<div id="newClusterModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Create a cluster</h4>
            </div>
            <div class="modal-body">
                <form class="form" id="add_new_cluster_form" data-toggle="validator">

                    <div class="form-group form-inline has-feedback">
                        <label for="cluster_name">*Name</label>
                        <input id="cluster_name" name="name" type="text"
                               class="form-control" pattern="^[-_A-z0-9]{1,}$"
                               placeholder="Chain Name" data-error="A name is required" max-length="16" required >
                    </div>
                {% if hosts_available|length > 0 %}
                    <div class="form-group">
                        <label for="host">Select a Host</label>
                        <select id="host" class="c-select" name="host_id" required>
                            <option selected value="{{ hosts_available[0].id}}">{{ hosts_available[0].name }}</option>
                            {% for h in hosts_available[1:] %}
                                <option value="{{h.id}}">{{h.name}}</option>
                            {% endfor %}
                        </select>
                    </div>
                {% endif %}
                {% if network_type|length > 0 %}
                    <div class="form-group" id="form_network_type">
                        <label for="network_type">Network Type</label>
                        <select id="network_type" class="c-select" name="network_type"
                                    required>
                            <option selected
                                    value="{{network_type[0]}}">{{network_type[0]}}
                            </option>
                            {% for c in network_type[1:] %}
                                    <option value="{{c}}">{{c}}
                                    </option>
                            {% endfor %}
                        </select>
                    </div>
                {% endif %}
                {% if cluster_sizes|length > 0 %}
                    <div class="form-group" id="form_sizes">
                        <label for="cluster_size">Chain Size</label>
                        <select id="cluster_size" class="c-select" name="size"
                                 required>
                            <option selected
                                    value="{{cluster_sizes[0]}}">{{cluster_sizes[0]}}</option>
                        </select>
                        <select id="cluster_sizes_1_0" style="display: none">
                            <option selected
                                    value="{{cluster_sizes[0]}}">{{cluster_sizes[0]|upper }}
	                        </option>
                        </select>
                        <select id="cluster_sizes_0_6" style="display: none">
                            <option selected
                                    value="{{cluster_sizes[0]}}">{{cluster_sizes[0]|upper }}</option>
                            {% for c in cluster_sizes[1:2:1] %}
                                    <option value="{{c}}">{{c|upper}}</option>
                            {% endfor %}
                        </select>
                    </div>
                {% endif %}
                {% if consensus_plugins|length > 0 %}
                    <div class="form-group" id="form_consensus_plugin">
                        <label for="consensus_plugin"> Consensus Plugin</label>
                        <select id="consensus_plugin" class="c-select" name="consensus_plugin"
                                 required>
                            <option selected
                                    value="{{consensus_plugins[0]}}">{{consensus_plugins[0]|upper }}
                            </option>
	                        {% for c in consensus_plugins[1:] %}
		                        <option
			                        value="{{c}}">{{c|upper}}
		                        </option>
	                        {% endfor %}
                        </select>
                        <select id="consensus_plugin_1_0" style="display: none">
                            <option selected
                                    value="{{consensus_plugins[2]}}">{{consensus_plugins[2]|upper }}</option>
                        </select>
                        <select id="consensus_plugin_0_6" style="display: none">
                            <option selected
                                    value="{{consensus_plugins[0]}}">{{consensus_plugins[0]|upper }}
                            </option>
                            {% for c in consensus_plugins[1:2:1] %}
                                    <option value="{{c}}">{{c|upper}}
                                    </option>
                            {% endfor %}
                        </select>
                    </div>
                {% endif %}
                {% if consensus_modes|length > 0 %}
                    <div class="form-group" id="form_consensus_mode"
                         style="display: none">
                        <label for="consensus_mode">Consensus Mode</label>
                        <select id="consensus_mode" class="c-select"
                                name="consensus_mode"
                                 required>
                            <option selected
                                    value="{{consensus_modes[0]}}">{{consensus_modes[0]|upper }}</option>
                            {% for c in consensus_modes[1:] %}
                                    <option value="{{c}}">{{c|upper}}</option>
                            {% endfor %}
                        </select>
                    </div>

                {% endif %}
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary btn-success btn-sm btn-default create_cluster_button" type="button">Create</button>
                <button class="btn btn-default btn-sm" data-dismiss="modal" type="button">Cancel</button>
            </div>
        </div>
    </div>
</div>

<!-- The form which is used to populate the item data -->
<form id="config_host_form" class="form-horizontal" data-toggle="validator" style="display: none;">
    <div class="form-group">
        <label class="col-sm-3 form-control-label">ID</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" name="id" disabled="disabled" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-3 form-control-label">Name</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" name="name"  pattern="^[-_A-z0-9]{1,}$"
                   maxlength="16" data-error="A name is required"/>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-3 form-control-label">Daemon URL</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" name="worker_api"
                   disabled="disabled" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-3 form-control-label">Capacity</label>
        <div class="col-sm-3">
            <input type="number" class="form-control" name="capacity"
                   min="0" max="1000" data-error="0~1000"/>
        </div>
    </div>

    <div class="form-group">
        <label  class="col-sm-3 form-control-label">Status</label>
        <div class="col-sm-3">
            <input type="text" class="form-control" name="status"
                   disabled="disabled" />
        </div>
        <input type="checkbox" name="schedulable"> Schedulable
        <input type="checkbox" name="autofill"> Autofill
    </div>

    <div class="form-group">
        <label  class="col-sm-3 form-control-label" for="host_type">Type</label>
        <div class="col-sm-3">
            <input type="text" class="form-control" name="type"
                   disabled="disabled" />
        </div>
    </div>
    {% if log_levels|length > 0 %}
        <div class="form-group">
            <label  class="col-sm-3 form-control-label"
                    for="log_level">Log Level</label>
            <div class="col-sm-8">
                <select class="c-select" name="log_level" id="log_level"
                        required>
                    {% for t in log_levels %}
                        <option value="{{t}}">{{t|upper}}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
    {% endif %}
    {% if log_types|length > 0 %}
        <div class="form-group">
            <label  class="col-sm-3 form-control-label"
                    for="log_type">Log Type</label>
            <div class="col-sm-8">
                <select class="c-select" name="log_type" id="log_type"
                        required>
                    {% for t in log_types %}
                        <option value="{{t}}">{{t|upper}}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
    {% endif %}
    <div class="form-group" id="log_server" style="display:none;">
        <label class="col-sm-3 form-control-label">Log Server</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" name="log_server" placeholder="192.168.0.1:5000"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 form-control-label">Created</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" name="create_ts"
                   disabled="disabled" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-3 form-control-label">Running Chains</label>
        <div class="col-sm-4">
            <input type="number" class="form-control" name="clusters"
                   disabled="disabled" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-8">
            <button type="button" id="save_host_button" class="btn btn-primary btn-default">Save</button>
            <button class="btn btn-default" data-dismiss="modal" type="button">Cancel</button>
        </div>
    </div>
</form>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="{{ url_for('static', filename='js/jquery-2.2.3.min.js') }}"> </script>
<script src="{{ url_for('static', filename='js/script.js') }}"> </script>
<script src="{{ url_for('static', filename='js/bootbox.min.js') }}"> </script>
<script src="{{ url_for('static', filename='js/bootstrap-notify.min.js') }}"> </script>
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"> </script>
<script src="{{ url_for('static', filename='js/validator.js') }}"> </script>
<script src="{{ url_for('static', filename='js/tether.min.js') }}"> </script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="{{ url_for('static', filename='js/ie10-viewport-bug-workaround.js') }}"> </script>
<script src="{{ url_for('static', filename='js/jquery.dataTables.min.js') }}"> </script>
<script src="{{ url_for('static', filename='js/dataTables.bootstrap.min.js') }}"> </script>
{% block custom_js %}
{% endblock %}
</body>
</html>
